<template>
  <div>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="8" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);min-height: 200px;">
          <el-tree
            ref="tree"
            node-key="id"
            :data="treeData"
            :props="treeProps"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="treeCheck"
          />
        </el-col>
        <el-col :span="16">
          <el-form size="mini" ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
            <el-row type="flex" justify="space-between" :gutter="20">

              <el-col :span="10">
                <el-form-item label="部门名称:">
                  <el-input v-model="postForm.name" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item>
                  <el-button type="primary" size="mini" @click="query()">查询</el-button>
                  <el-button type="warning" size="mini" @click="addInfo()">新增</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table :height="tableHeight" :row-class-name="tableRowClassName" :data="tableData" border>
            <el-table-column type="index" align="center" width="50"></el-table-column>
            <el-table-column
              prop="name"
              label="部门名称"
            />
            <el-table-column
              fixed="right"
              label="操作" width="300" align="center"
            >
              <template slot-scope="scope">
                <el-button type="success" size="mini" @click="editInfo(scope.$index,scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delInfo(scope.$index,scope.row)">删除</el-button>
                <el-button type="warning" size="mini" @click="deptSort(scope.row,0)">上移</el-button>
                <el-button type="warning" size="mini" @click="deptSort(scope.row,1)">下移</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" class="row-bg" justify="center">
            <el-pagination
              background
              layout="total,prev,pager,next,jumper,sizes"
              :total="total"
              @size-change="handleSizeChange"
              :current-page.sync="currentPage"
              :page-sizes="[15, 30, 45, 60, 75,90,105,120,135,150]"
              :page-size="pageSize"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-col>
      </el-row>

    </div>

    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :rules="rules" :model="info" label-position="right" label-width="100px">
        <el-form-item label="部门名称:" prop="name">
          <el-input v-model="info.name" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="上级部门:" prop="pDeptName">
          <el-input v-model="pDeptName" placeholder="请选择上级部门"/>
          <el-tree
            ref="tree"
            node-key="menuKey"
            :data="treeData"
            :props="treeProps"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="treeInfoCheck"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-table {
  background: oldlace;
}

.el-table {
  background: #f0f9eb;
}
</style>

<script>
import { page, getInfo, delInfo, addOrEdit, getTreeList, deptSort } from '@/api/system/dept.js'

export default {
  data() {
    return {
      tableHeight: window.innerHeight - 180,
      fileUpUrl: process.env.BASE_API + '/file/upload',
      // 总条数
      total: 0,
      // 每页显示个数
      pageSize: 15,
      // 页码
      currentPage: 1,
      readExcelDialog: false,
      pDeptName: '',
      postForm: {},
      // 树结构
      treeData: [],
      // 树结构配置
      treeProps: {
        children: 'children',
        label: 'name'
      },
      info: {},
      tableData: [],
      readExcelFile: null,
      name: null,
      pId: null,
      id: null,
      options: [],
      editIndex: 0,
      centerDialogVisible: false,
      title: '新增部门',
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        deptType: [{ required: true, message: '请选择部门类型', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getData()
    this.getTreeList()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    knowledgeSuccess(res, file, fileList) {
      readExcel(res.data.address).then(response => {
        this.getData()
        this.getTreeList()
        this.$notify({
          title: '成功',
          message: '导入 成功',
          type: 'success',
          duration: 2000
        })
        this.readExcelFile = []
        this.readExcelDialog = false
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传一个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.deptPath.split('/').length === 3) {
        return 'warning-row'
      } else if (row.deptPath.split('/').length === 4) {
        return 'success-row'
      }
      return ''
    },
    // 排序
    deptSort(row, sort) {
      deptSort(this.id, row.id, sort).then(response => {
        this.getData()
        this.getTreeList()
      })
    },
    // 获取权限树结构
    getTreeList() {
      getTreeList().then(response => {
        this.treeData = response.data
      })
    },
    // 分页查询
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    // 导入部门
    readExcel() {
      this.readExcelDialog = true
      this.readExcelFile = []
    },
    // 新增
    addInfo() {
      this.title = '新增部门'
      this.info = {}
      this.pDeptName = ''
      this.centerDialogVisible = true
    },
    /**
     * 编辑
     * @param row
     */
    editInfo(index, row) {
      this.editIndex = index
      this.title = '编辑'
      this.centerDialogVisible = true
      getInfo(row.id).then(response => {
        this.info = response.data
        this.pDeptName = response.data.pDeptName
      })
    },
    delInfo(index, row) {
      this.$confirm('此操作将永久删除部门及部门下的用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delInfo(row.id).then(response => {
          this.tableData.splice(index, 1)
          this.getTreeList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    // 查询条件
    query() {
      this.name = this.postForm.name
      this.currentPage = 1
      this.getData()
    }, treeInfoCheck(node) {
      this.info.pId = node.id
      this.pDeptName = node.name
    },
    // 树结构选择
    treeCheck(node) {
      this.id = node.id
      this.name = this.postForm.name
      this.deptPath = this.postForm.deptPath
      this.currentPage = 1
      this.getData()
    },
    getData() {
      // 请求分页参数
      page(this.pageSize, this.currentPage, this.name, this.pId, this.id).then(response => {
        this.total = parseInt(response.count)
        this.tableData = response.data
      })
    },
    addOrEdit: function() {
      this.$refs['info'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id, this.info.name, this.info.pId).then(response => {
            this.centerDialogVisible = false
            this.getTreeList()
            if (this.info.id == null) {
              // 新增
              this.getData()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              // 编辑
              this.tableData.splice(this.editIndex, 1, response.data)
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

